<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试模态框</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .layui-table-cell {
            height: 10px;
            line-height: 10px
        }
    </style>
</head>
<body>

<!--模仿bootstrap的模态框-->
<div id="motaikunag" style="display: none;">
    <form class="layui-form" action="">
        <div class="layui-form-item">
                <button class="layui-btn layui-btn-radius layui-btn-primary" type="submit" lay-submit="" lay-filter="demo1">保存</button>
                <button class="layui-btn layui-btn-radius layui-btn-primary" type="submit" lay-submit="" lay-filter="demo1">提交</button>
                <button class="layui-btn layui-btn-radius layui-btn-primary" type="submit" lay-submit="" lay-filter="demo1">返回</button>
            <!--表格-->
            <table class="layui-table" lay-skin="" >
                <tr class="layui-table-cell">
                    <td> <label class="layui-form-label">判定方式</label></td>
                    <td>
                        <div class="layui-form-item">
                            <div class="layui-input-block width_250 pos-r">
                                <select name="DataType" id="" lay-verify="required">
                                    <option value="">请选择</option>
                                    <option value="">1</option>
                                    <option value="">2</option>
                                </select>
                            </div>
                        </div>
                    </td>
                    <td> <label class="layui-form-label">货主</label></td>
                    <td>
                        <div class=" layui-inline">
                            <div class="layui-input-inline " style="width: 150px;">
                                <input type="text" name="text" required lay-verify="required" placeholder=""
                                       autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                    </td>
                    <td> <label class="layui-form-label">检验方案</label></td>
                    <td>
                        <div class=" layui-inline">
                            <div class="layui-input-inline " style="width: 150px;">
                                <input type="text" name="text" required lay-verify="required" placeholder=""
                                       autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                    </td>
                </tr>
                <!-- 第二行-->
                <tr class="layui-table-cell">
                    <td> <label class="layui-form-label">机型</label></td>
                    <td>
                        <div class="layui-form-item">
                            <div class="layui-input-block width_250 pos-r">
                                <select name="DataType" id="ddlDataType_searchForm123432" lay-verify="required">
                                    <option value="">请选择</option>
                                    <option value="">1</option>
                                    <option value="">2</option>
                                </select>
                            </div>
                        </div>
                    </td>
                    <td> <label class="layui-form-label">物料编码</label></td>
                    <td>
                        <div class=" layui-inline">
                            <div class="layui-input-inline " style="width: 150px;">
                                <input type="text" name="text" required lay-verify="required" placeholder=""
                                       autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                    </td>
                    <td> <label class="layui-form-label">物料描述</label></td>
                    <td>
                        <div class=" layui-inline">
                            <div class="layui-input-inline " style="width: 150px;">
                                <input type="text" name="text" required lay-verify="required" placeholder=""
                                       autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                    </td>
                </tr>
                <!--第三行-->
                <tr class="layui-table-cell">
                    <td> <label class="layui-form-label">送货单</label></td>
                    <td>
                        <div class="layui-form-item">
                            <div class="layui-input-block width_250 pos-r">
                                <select name="DataType" id="ddlDataType_searchForm123432" lay-verify="required">
                                    <option value="">请选择</option>
                                    <option value="">1</option>
                                    <option value="">2</option>
                                </select>
                            </div>
                        </div>
                    </td>
                    <td> <label class="layui-form-label">供应商代码</label></td>
                    <td>
                        <div class=" layui-inline">
                            <div class="layui-input-inline " style="width: 150px;">
                                <input type="text" name="text" required lay-verify="required" placeholder=""
                                       autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                    </td>
                    <td> <label class="layui-form-label">待检数量</label></td>
                    <td>
                        <div class=" layui-inline">
                            <div class="layui-input-inline " style="width: 150px;">
                                <input type="text" name="text" required lay-verify="required" placeholder=""
                                       autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                    </td>
                </tr>
                <!--第四行-->
                <tr class="layui-table-cell">
                    <td> <label class="layui-form-label">抽检数量</label></td>
                    <td>
                        <div class="layui-form-item">
                            <div class="layui-input-block width_250 pos-r">
                                <select name="DataType" id="ddlDataType_searchForm123432" lay-verify="required">
                                    <option value="">请选择</option>
                                    <option value="">1</option>
                                    <option value="">2</option>
                                </select>
                            </div>
                        </div>
                    </td>
                    <td> <label class="layui-form-label">合格数量</label></td>
                    <td>
                        <div class=" layui-inline">
                            <div class="layui-input-inline " style="width: 150px;">
                                <input type="text" name="text" required lay-verify="required" placeholder=""
                                       autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                    </td>
                    <td> <label class="layui-form-label">不合格数量</label></td>
                    <td>
                        <div class=" layui-inline">
                            <div class="layui-input-inline " style="width: 150px;">
                                <input type="text" name="text" required lay-verify="required" placeholder=""
                                       autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                    </td>
                </tr>
                <!--第五行-->
                <tr class="layui-table-cell">
                    <td> <label class="layui-form-label">不良数</label></td>
                    <td>
                        <div class="layui-form-item">
                            <div class="layui-input-block width_250 pos-r">
                                <select name="DataType" id="ddlDataType_searchForm123432" lay-verify="required">
                                    <option value="">请选择</option>
                                    <option value="">1</option>
                                    <option value="">2</option>
                                </select>
                            </div>
                        </div>
                    </td>
                    <td> <label class="layui-form-label">留样数量</label></td>
                    <td>
                        <div class=" layui-inline">
                            <div class="layui-input-inline " style="width: 150px;">
                                <input type="text" name="text" required lay-verify="required" placeholder=""
                                       autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                    </td>
                    <td> <label class="layui-form-label">拒收数量</label></td>
                    <td>
                        <div class=" layui-inline">
                            <div class="layui-input-inline " style="width: 150px;">
                                <input type="text" name="text" required lay-verify="required" placeholder=""
                                       autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                    </td>
                </tr>
                <!--第六行-->
                <tr class="layui-table-cell">
                    <td> <label class="layui-form-label">检验结果</label></td>
                    <td>
                        <div class="layui-form-item">
                            <div class="layui-input-block width_250 pos-r">
                                <select name="DataType" id="ddlDataType_searchForm123432" lay-verify="required">
                                    <option value="">请选择</option>
                                    <option value="">1</option>
                                    <option value="">2</option>
                                </select>
                            </div>
                        </div>
                    </td>
                    <td> <label class="layui-form-label">不良原因</label></td>
                    <td>
                        <div class=" layui-inline">
                            <div class="layui-input-inline " style="width: 150px;">
                                <input type="text" name="text" required lay-verify="required" placeholder=""
                                       autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                    </td>
                    <td> <label class="layui-form-label">备注</label></td>
                    <td>
                        <div class=" layui-inline">
                            <div class="layui-input-inline " style="width: 150px;">
                                <input type="text" name="text" required lay-verify="required" placeholder=""
                                       autocomplete="off" class="layui-input" >
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</div>

<div class="layui-form-item">
    <div class="layui-input-block width_250 pos-r">
        <select name="DataType" id="ddlDataType_searchForm123" lay-verify="required">
            <option value="">请选择</option>
            <option value="">1</option>
            <option value="">2</option>
        </select>
    </div>
</div>
<button type="button" onclick="openModak()">开启模态框</button>

<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/js/jquery-1.8.3.js"></script>
<script>
    function openModak(){
        layui.use(['layer'],function () {
            var layer = layui.layer,$=layui.$;
            var form = layui.form;
            layer.open({
                type:1,//类型
                area:['1200px','600px'],//定义宽和高
                title:'IQC检验详情',//题目
                shadeClose:false,//点击遮罩层关闭
                content: $('#motaikunag')//打开的内容
            });
            //重新渲染
            // form.render('select');
        })
    }
</script>

</body>
</html>
